<template>
	<view class="user-space wrap-card">
		<!-- 返回按钮 -->
		<u-navbar :autoBack="true" placeholder>

		</u-navbar>

		<!-- 头像栏 -->
		<view class="header flex items-center border-b pb-20">
			<image class="header-img" :src="avatar" mode="aspectFill"></image>
			<view class="pl-30 flex-1">
				<view class="flex items-center mb-20">
					<view class="flex-1 flex flex-col items-center justify-center">
						<text class="font-bold text-32">{{ friendCount }}</text>
						<text class="text-26">好友数</text>
					</view>
					<view class="flex-1 flex flex-col items-center justify-center">
						<text class="font-bold text-32">{{ postCount }}</text>
						<text class="text-26">帖子</text>
					</view>
				</view>

				<!-- 根据关系显示按钮 -->
				<view class="">
					<u-button v-if="isFriend" :customStyle="btnStyle" :ripple="true"
						@click="deleteFriend">删除</u-button>
					<u-button v-else-if="!hasSentRequest" :customStyle="btnStyle" :ripple="true"
						@click="sendFriendRequest">添加</u-button>
					<text v-else class="sent-tag">已发送请求</text>
				</view>

				<!-- 微信小程序右侧菜单图标 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="handle-icon iconfont iconcaidan" @click="showPopup = true"></view>
				<!-- #endif -->
			</view>
		</view>

		<!-- 标签切换 -->
		<u-sticky bgColor="#fff">
			<view class="nav-center">
				<view :class="{'active': tabIndex === index}" @click="changeTab(index)"
					v-for="(item, index) in tabList" :key="index">
					<view class="nav-title">
						{{ item.name }}
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 切换内容：基本信息 -->
		<template v-if="tabIndex === 0">
			<view class="p-30 border-b">
				<view class="text-30 mb-20">
					账号信息
				</view>
				<view class="text-28 my-10">
					用户名：<text class="text-gray-500">{{ username || '暂无' }}</text>
				</view>
				<view class="text-28 my-10">
					用户ID：<text class="text-gray-500">{{ userId || '暂无' }}</text>
				</view>
			</view>
			<view class="p-30 border-b">
				<view class="text-30 mb-20">
					个人信息
				</view>
				<view class="text-28 my-10">
					邮箱：<text class="text-gray-500">{{ email || '暂无' }}</text>
				</view>
				<view class="text-28 my-10">
					电话：<text class="text-gray-500">{{ phone || '暂无' }}</text>
				</view>
				<view class="text-28">
					简介：<text class="text-gray-500">{{ bio || '暂无简介' }}</text>
				</view>
			</view>
		</template>

		<template v-if="tabIndex === 1">
			<template v-if="commonFriends.length > 0">
				<common-friend v-for="(item, index) in commonFriends" :key="index" :item="item" />
				<u-loadmore v-if="commonFriends.length >= 10" :status="loadStatus"></u-loadmore>
			</template>
			<template v-else>
				<view class="p-30">
					<view class="text-28 my-10">
						暂无共同好友
					</view>
				</view>
			</template>
		</template>

		<template v-if="tabIndex === 2">
			<template v-if="postList.length > 0">
					<post-item
						v-for="(post, index) in postList"
						:key="index"
						:item="post"
						:current-user-id="currentId"
						@deleted="handlePostDeleted"
					/>
					<u-loadmore v-if="postList.length >= 10" :status="loadStatus"></u-loadmore>
			</template>
			<template v-else>
				<u-empty text="暂无帖子" icon="/static/img/demo/winter.svg" mode="list"></u-empty>
			</template>
		</template>

		<!-- 弹出菜单 -->
		<u-popup :show="showPopup" @close="showPopup = false" mode="top" :safeAreaInsetTop="true">
			<view class="flex justify-center items-center text-30 py-20 border-b" hover-class="bg-gray"
				@click="goToChat">
				<text class="iconfont iconliaotian mr-20"></text>发送消息
			</view>
			<view class="flex justify-center items-center text-30 py-20" hover-class="bg-gray"
				@click="showPopup = false">
				<text class="iconfont iconpinglun mr-20"></text>取消
			</view>
		</u-popup>
	</view>
</template>

<script>
import {UserApi,UserFriendApi,PostApi} from '@/api/index.js'
import CommonFriend from "@/pages/paper/cpns/common-friend.vue";
import websocketMixin from '@/utils/mixins/websocketMixin'
import PostItem from "@/components/post-item/index.vue";

export default {
	mixins: [websocketMixin],
	components: {
		CommonFriend,
		PostItem
	},
	data() {
		return {
			currentId: getApp().globalData.userId,
			showPopup: false,
			btnStyle: {
				width: "120rpx",
				height: "60rpx",
				borderRadius: '10rpx',
				background: "linear-gradient(-45deg,#01906c,#34D399)",
				color: "#FFFFFF",
				fontSize: "30rpx",
			},
			tabIndex: 0,
			tabList: [
				{ name: "主页" },
				{ name: "共同好友" },
				{ name: "帖子" }
			],
			// 共同好友
			commonFriends: [],
			postList: [],
			query: {
				pageNo: 1,
				pageSize: 100
			},
			// 好友数据
			userId: null,
			username: '',
			nickname: '',
			email: '',
			phone: '',
			bio: '',
			avatar: '/static/img/header/default.png',
			isFriend: false,
			hasSentRequest: false,
			friendCount: 0,
			likeCount: 0,
			postCount: 0
		};
	},
	onLoad(options) {
		const friendId = options.userId;
		this.userId = friendId;
		if (friendId) {
			this.loadFriendData(friendId);
			this.loadIfFriend(friendId);
			this.loadSentRequest(friendId);
			this.loadCommonFriends(friendId);
			this.loadPostList();
		} else {
			uni.showToast({ title: '参数错误', icon: 'none' });
		}
	},
	methods: {
		// 查询所跳转用户的帖子
		async loadPostList() {
			const params = {
				userId: this.userId,
				...this.query
			};
			const res = await PostApi.getPostsByUserId(params);
			if (res.code === 200) {
				this.postList = res.data.list;
			} else {
				uni.showToast({ title: '获取帖子列表失败', icon: 'none' });
			}
		},
		async loadFriendData(userId) {
			const res = await UserApi.getUserInfo(userId);
			if (res.code === 200) {
				this.username = res.data.username;
				this.email = res.data.email;
				this.phone = res.data.phoneNumber;
				this.bio = res.data.bio;
				this.avatar = res.data.avatarUrl;
				this.friendCount = res.data.friendCount;
				this.postCount = res.data.postCount;
			} else {
				uni.showToast({ title: '获取用户信息失败', icon: 'none' });
			}
		},
		async loadSentRequest(userId){
			const res = await UserFriendApi.hasRequested(userId);
			if (res.code === 200) {
				this.hasSentRequest = res.data;
			} else {
				uni.showToast({ title: '获取好友状态失败', icon: 'none' });
			}
		},
		async loadIfFriend(userId) {
			const res = await UserFriendApi.getIfFriend(userId);
			if (res.code === 200) {
				this.isFriend = res.data;
			} else {
				uni.showToast({ title: '获取好友状态失败', icon: 'none' });
			}
		},
		async loadCommonFriends(userId) {
			const res = await UserFriendApi.getCommonFriends(userId);
			if (res.code === 200) {
				this.commonFriends = res.data;
			} else {
				uni.showToast({ title: '获取共同好友失败', icon: 'none' });
			}
		},
		// 标签切换
		changeTab(index) {
			this.tabIndex = index;
		},
		goToChat() {
			uni.navigateTo({
				url: `/pages/paper/chat?friendId=${this.userId}`
			});
			this.showPopup = false;
		},
		async sendFriendRequest() {
			const res = await UserFriendApi.addFriend(this.userId);
			if (res.code === 200) {
				uni.showToast({ title: '请求已发送' });
				this.hasSentRequest = true;
			} else {
				uni.showToast({ title: '发送请求失败', icon: 'none' });
			}
		},
		deleteFriend() {
			const id = this.userId;
			uni.showModal({
				title: '确认删除',
				content: '确定要删除该好友吗？',
				success: async res => {
					if (res.confirm) {
						
						const res = await UserFriendApi.deleteFriend(id);
						if (res.code === 200) {
							uni.showToast({ title: '删除成功' });
							this.isFriend = false;
						} else {
							uni.showToast({ title: '删除失败', icon: 'none' });
						}
					}
				}
			});
		},
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.user-space {
	position: relative;

	.back-btn {
		position: absolute;
		top: var(--status-bar-height); /* 自动适配状态栏高度 */
		left: 30rpx;
		z-index: 99;
	}

	.header {
		position: relative;

		.header-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 100%;
		}

		.handle-icon {
			position: absolute;
			right: -10rpx;
			top: -20rpx;
			color: #fff;
			background: #4B5563;
			opacity: 0.8;
			padding: 12rpx;
			border-radius: 100%;
		}
	}

	.nav-center {
		height: 80rpx;
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #fff;

		.nav-title {
			height: 80rpx;
			line-height: 80rpx;
			width: 120rpx;
			font-size: 30rpx;
			padding: 0 15rpx;
			font-weight: bold;
			color: $uni-text-color-gray;
		}

		.active {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			.nav-title {
				color: $uni-color-green;
			}
		}
	}
}
</style>